<template>
    <div class="goods-sku">
        <dl v-for="item in goods.specs" :key="item.id">
            <dt>{{item.name}}</dt>
            <dd>
                <template v-for="val in  item.values" :key="val.name">
                    <img :class="{selected:val.selected,disabled:val.disabled}" @click="changeSku(item,val)" v-if="val.picture" :src="val.picture" :title="val.name" alt="" />
                    <span :class="{selected:val.selected,disabled:val.disabled}" @click="changeSku(item,val)" v-else>{{val.name}}</span>
                </template>
            </dd>
        </dl>
    </div>
</template>
<script>
import PowerSet from "@/vender/power-set";
const spliter = '☆'
// 得到一个路径字典
const getPathMap = (skus) =>{
    // 1\得到所有的sku集合 props.goods.skus
    // 2\从所有的sku中筛选出有效的sku
    // 3\根据有效的sku使用power-set算法得到子集
    // 4、根据子集往路径字典对象中存储key-value
    const pathMap = {}
    skus.forEach(sku=>{
        if (sku.inventory > 0) {
            // 计算当前有库存的sku子集
            // 可选值数组
            const valueArr = sku.specs.map(val=>val.valueName)
            const valueArrPowerSet = PowerSet(valueArr)
            // 遍历子集 往pathMap插入数据
            valueArrPowerSet.forEach(arr => {
                const key = arr.join(spliter)
                // 往字典里加数据
                if (pathMap[key]) {
                    pathMap[key].push(sku.id)
                }else{
                    pathMap[key] = [sku.id]
                }
            })
        }
    })
    return pathMap
}
// 选中的按钮
const getSelectValues = (specs) => {
    const arr = []
    specs.forEach(item => {
        const selectVal = item.values.find(v=>v.selected)
        arr.push(selectVal?selectVal.name:undefined)
    })
    return arr
}
// 更改按钮禁用状态
const updateDisabledStatus = (specs,pathMap) => {
    specs.forEach((item,i) => {
        const selectedValues = getSelectValues(specs)
        item.values.forEach(val => {
            selectedValues[i] = val.name
            const key  = selectedValues.filter(value=>value).join(spliter)
            // 去路径字典查找是否有数据 
            val.disabled = !pathMap[key]
        })
    })
}
// 初始化选中
const initSelectedStatus = (goods,skuId) => {
    const sku = goods.skus.find(v=>v.id === skuId)
    if (sku) {
        goods.specs.forEach((item,i)=>{
            const val = item.values.find(v=>v.name === sku.specs[i].valueName)
            val.selected = true
        })
        
    }
}
export default {
    name: "GoodsSku",
    props:{
        goods:{
            type:Object,
            default:()=>{}
        },
        skuId:{
            type:String,
            default:''
        }
    },
    // 1379052170040578049
    setup(props,{emit}){
        const pathMap = getPathMap(props.goods.skus)
        // 获取默认选中
        if (props.skuId) {
            initSelectedStatus(props.goods,props.skuId)
        }
        updateDisabledStatus(props.goods.specs,pathMap)
        // 1、选中与取消选中 约定在每一个按钮都拥有自己的状态：selected
        // 当你点击的是已选中的 只需要取消当前的选中
        // 当点击的是未选中 把同一个规格的按钮改为未选中 当前点击的选中
        const changeSku = (item,val) => {
            // 当禁用时 阻止执行
            if(val.disabled) return
            if (val.selected) {
                val.selected = false
            }else{
                item.values.forEach(v=>{
                    v.selected = false
                })
                val.selected = true
            }
            updateDisabledStatus(props.goods.specs,pathMap)
            // 触发父组件
            // 1、获取选中的值
            const selectValues = getSelectValues(props.goods.specs).filter(v=>v)
            if (selectValues.length === props.goods.specs.length) {
                // 完整的
                const skuIds = pathMap[selectValues.join(spliter)]
                const sku = props.goods.skus.find(v=>v.id === skuIds[0])
                emit('change',{
                    skuId: sku.id,
                    price: sku.price,
                    oldPrice: sku.oldPrice,
                    inventory: sku.inventory,
                    specsText:sku.specs.reduce((p,c)=>`${p} ${c.name}：${c.valueName}`,'').trim()
                })
            }else{
                // 没选完整 不触发父组件
                emit('change',{})
            }
        }

        return {changeSku}
    }
};
</script>
<style scoped lang="less">
.sku-state-mixin () {
    border: 1px solid #e4e4e4;
    margin-right: 10px;
    cursor: pointer;
    &.selected {
        border-color: @xtxColor;
    }
    &.disabled {
        opacity: 0.6;
        border-style: dashed;
        cursor: not-allowed;
    }
}
.goods-sku {
    padding-left: 10px;
    padding-top: 20px;
    dl {
        display: flex;
        padding-bottom: 20px;
        align-items: center;
        dt {
            width: 50px;
            color: #999;
        }
        dd {
            flex: 1;
            color: #666;
            > img {
                width: 50px;
                height: 50px;
                .sku-state-mixin ();
            }
            > span {
                display: inline-block;
                height: 30px;
                line-height: 28px;
                padding: 0 20px;
                .sku-state-mixin ();
            }
        }
    }
}
</style>